<!--
author:        hejy <silentmanager@163.com>
date:          2024-11-07 17:15:28
component:     takeUpStock
Copyright © YourCompanyName All rights reserved
-->

<template>
  <el-dialog title="占用库存订单列表" v-model="isVisible" @close="handleClose" width="1000px">
    <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 24px">
      <el-input
        v-model="drinkName"
        placeholder="请输入套餐内容"
        style="width: 240px; margin-right: 12px"
      />
      <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
      <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
    </div>
    <el-card>
      <el-table :height="660" :data="list" style="width: 100%" v-loading="loading">
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
          </template>
        </el-table-column>
        <el-table-column label="套餐名称" prop="orderPackageName" />
        <el-table-column label="套餐内容" prop="drinkName" />
        <el-table-column label="占用" prop="amount" />
        <el-table-column label="录单班组" prop="teamName" />
        <el-table-column label="录单人" prop="creatorName" />
        <el-table-column label="订单状态" prop="orderStatus">
          <template #default="{ row }">
            <span>{{ tableStatus(row.orderStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录单时间" prop="createTime" />
        <el-table-column label="修改时间" prop="updateTime" />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import { searchByProduct, SearchByProductRes } from '@/api/order/all'
import { getIntDictOptions } from '@/utils/dict'
import { ref, watch, defineProps, defineEmits } from 'vue'

// =========12 ====
// 定义组件的 props
interface Props {
  visible: boolean
}

// 获取 props 和 emits
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

// 局部状态变量，用于管理弹窗的可见性
const isVisible = ref<boolean>(props.visible)

// --------------------  表格  ---------------------
const orderStatus = getIntDictOptions('bms_order_status')
const tableStatus = (status: string) => {
  return orderStatus.find((item) => item.value === Number(status))?.label
}
const drinkName = ref('')
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<SearchByProductRes[]>([]) // 列表的数据
// 分页
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await searchByProduct({ ...queryParams, drinkName: drinkName.value })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  drinkName.value = ''
  handleQuery()
}

watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
    if (newValue) {
      getList()
    }
  }
)
// 关闭弹窗的处理函数
const handleClose = () => {
  isVisible.value = false // 设置局部状态
  emit('update:visible', false) // 通知父组件
  drinkName.value = ''
  queryParams.pageNo = 1
  queryParams.pageSize = 10
}
</script>
